<template>
  <div class="user-container mt20 ml20 fs14p">
    <div class="container-search w100 flex flex-wrap">
      <div class="w33 h29p lh29p mtb5">
        <div class="flex">
          <div class="w100p pr10p textRight">姓名</div>
          <el-input
            v-model="searchFormData.name"
            size="mini"
            class="w200p"
          ></el-input>
        </div>
      </div>
      <div class="w33 h29p lh29p mtb5">
        <div class="flex">
          <div class="w100p pr10p textRight">手机号</div>
          <el-input
            v-model="searchFormData.mobile"
            size="mini"
            class="w200p"
          ></el-input>
        </div>
      </div>
      <div class="w33 h29p lh29p mtb5">
        <div class="flex">
          <el-button type="primary" size="mini">查询</el-button>
          <el-button size="mini">重置</el-button>
        </div>
      </div>
    </div>
    <div class="w100 container-body">
      <!--      <div class="mt10">-->
      <!--        <el-button type="primary" size="mini" @click="showCreateUser">添加用户</el-button>-->
      <!--      </div>-->
      <div class="mt10 mb10">
        <el-table :data="list" border fit class="w100 tableBodyHeight">
          <el-table-column
            v-loading="loading"
            align="center"
            label="ID"
            width="65"
            element-loading-text="请给我点时间！"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="author"
            align="center"
            label="姓名"
            width="180"
            class="cell"
          ></el-table-column>
          <el-table-column
            prop="author"
            align="center"
            label="昵称"
            width="180"
            class="cell"
          ></el-table-column>
          <el-table-column
            prop="author"
            align="center"
            label="手机号"
            width="180"
            class="cell"
          ></el-table-column>
          <el-table-column
            prop="author"
            align="center"
            label="性别"
            width="180"
            class="cell"
          ></el-table-column>
          <el-table-column
            prop="author"
            align="center"
            label="地区"
            width="180"
            class="cell"
          ></el-table-column>
          <el-table-column
            prop="author"
            align="center"
            label="绑定设备编号"
            width="180"
            class="cell"
          ></el-table-column>
          <el-table-column
            prop="author"
            align="center"
            label="openID"
            width="180"
            class="cell"
          ></el-table-column>
          <el-table-column width="180px" align="center" label="注册时间">
            <template slot-scope="scope">
              <span>{{
                scope.row.timestamp | parseTime("{y}-{m}-{d} {h}:{i}")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column class-name="status-col" label="操作">
            <template slot-scope="{ row }">
              <el-button type="primary" size="mini" @click="showEditUser(row)"
                >详情</el-button
              >
              <el-button type="danger" size="mini" @click="deleteUser(row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="page-content flex w100 mt10">
          <el-pagination
            class="flex"
            background
            layout="prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      :fullscreen="true"
      :modal="false"
      class="FormDialog"
      :title="dialogTitle"
      :visible.sync="isShowDetail"
      :style="{ display: formDialogDisplay }"
    >
      <UserDetail :userDetailData="userDetailData"></UserDetail>
    </el-dialog>
  </div>
</template>

<script>
import { fetchList } from "@/api/user";
import UserDetail from "./components/UserDetail";
export default {
  name: "User",
  components: {
    UserDetail,
  },
  data() {
    return {
      total: 30,
      dialogTitle: "添加用户",
      list: null,
      listQuery: {
        page: 1,
        limit: 5,
        type: "CN",
        sort: "+id",
      },
      searchFormData: {
        page: 1,
        pageSize: 20,
        name: null,
        mobile: null,
      },
      userDetailData: {},
      loading: false,
      isShowDetail: false,
      formDialogDisplay: "none",
    };
  },
  watch: {},
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      fetchList(this.searchFormData).then((response) => {
        this.list = response.data.data;
        this.searchFormData.page = response.data.current_page;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    showCreateUser() {
      this.dialogTitle = "添加用户";
      this.isShowDetail = true;
      this.formDialogDisplay = "flex";
    },
    showEditUser(row) {
      this.dialogTitle = "修改用户";
      this.isShowDetail = true;
      this.formDialogDisplay = "flex";
      this.userDetailData = row;
    },
    deleteUser(row) {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped>
.user-container {
  width: 98%;
  margin: 20px auto;
  border: 1px solid #ebeef5;
  border-radius: 5px;
  background-color: #fff;
  color: #303133;
  transition: 0.3s;
}

.container-search {
  background-color: #ecf5ff;
  border-color: #c3d3e2;
  padding: 18px 20px;
  border-bottom: 1px solid #ebeef5;
  box-sizing: border-box;
}
.container-body {
  padding-left: 1%;
  padding-right: 1%;
}
.page-content {
  align-items: center;
  justify-content: center;
}

/deep/ .el-table thead {
  color: #767d88;
}
/deep/ .el-table__header-wrapper {
  height: 36px;
}
/deep/ .el-table--medium th {
  height: 36px;
  line-height: 1.5;
  padding: 0;
}
/deep/ .el-table--medium td {
  height: 36px;
  line-height: 1.5;
  padding: 0;
}
/deep/ .el-table thead th {
  background-color: #ecf5ff !important;
}
/deep/ .el-button--mini {
  font-weight: bold;
}
</style>
